<%--
  Created by IntelliJ IDEA.
  User: Lanan
  Date: 2017/12/25 0025
  Time: 13:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<html>
<head>
    <%@ include file="/commons/basejs.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>微信公众号交互</title>
</head>
<body>
<div class="easyui-layout" fit="true" >
    <div data-options="region:'west',split:true,border:false" title="微信公众号交互" style="width:40%;">
        <table id="interaction_grid" class="easyui-datagrid"
               data-options="
		   		url:'${path}/wechat/public/number/interaction/list.do',
		   		fit:true,
		   		idField:'id',
		   		rownumbers:true,
		   		toolbar:'#interaction_tools',
		   		pagination:true,
		   		fitColumns:true,
		   		singleSelect:true,
		   		onClickRow:function(index, row){
		   		    getContentApply(row.id);
		   		},
		   		">
            <thead>
            <th data-options="field:'id', align:'center', checkbox:true">ID</th>
            <th data-options="field:'name', align:'center'">交互名</th>
            <th data-options="field:'type',align:'center',formatter:formatType">回复类型</th>
            <th data-options="field:'replyType',align:'center',formatter:formatReplyType">发送样式</th>
            <th data-options="field:'k', align:'center'">关键字</th>
            <th data-options="field:'status', align:'center',formatter:formatterStatus">是否启用</th>
            <th data-options="field:'createTime',align:'center',formatter:formatDatebox">创建时间</th>
            <th data-options="field:'updateTime',align:'center',formatter:formatDatebox">更新时间</th>
            </thead>
        </table>
        <div id="interaction_tools">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="$('#interaction_grid').datagrid('reload');">刷新</a>
            <shiro:hasPermission name="/wechat/public/number/interaction/insert.do">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="insertInteraction()">添加</a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/wechat/public/number/interaction/update.do">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="updateInteraction()">修改</a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/wechat/public/number/interaction/delete.do">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="deleteInteraction()">删除</a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/wechat/public/number/interaction/changeInteractionStatusToEnableOrDisable.do">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-tip'" onclick="changeWPNIAble()">启用|禁用</a>
            </shiro:hasPermission>
            <form action="#" id="searchInteractionForm">
                <label>交互名:</label>
                <input class="easyui-textbox" id="search_interaction_title" name="name" data-options="prompt:'请输入搜索交互名',width:'150px'"/>
                <label>关键字:</label>
                <input class="easyui-textbox" id="search_interaction_key" name="k" data-options="prompt:'请输入搜索交互关键字',width:'150px'"/>
                <br>
                <lable>回复类型:</lable>
                <select id="search_interaction_type" class="easyui-combobox" name="type" data-options="editable:false,panelHeight:'auto',width:'138px'">
                    <option value="">全部</option>
                    <option value="0">默认</option>
                    <option value="1">关键字</option>
                    <option value="2">地理位置</option>
                    <option value="3">关注</option>
                    <option value="4">带参关注</option>
                    <option value="5">按钮交互</option>
                    <option value="6">扫码待提示</option>
                    <option value="7">扫码推事件</option>
                </select>
                <lable>发送样式:</lable>
                <select id="search_interaction_replyType" class="easyui-combobox" name="replyType" data-options="editable:false,panelHeight:'auto',width:'138px'">
                    <option value="">全部</option>
                    <option value="0">纯文本</option>
                    <option value="1">单图</option>
                    <option value="2">单图文</option>
                    <option value="3">图文列表</option>
                </select>
                &nbsp&nbsp&nbsp&nbsp
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="doSearchInteraction()">搜索</a>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="doSearchInteractionRest()">重置</a>
            </form>
        </div>

        <%--编辑与添加分类--%>
        <div class="easyui-dialog" id="interaction_insert_dialog" data-options="closed:true,modal:true,width:400,height:260">
            <form id="interaction_insert_form" method="post">
                <table align="center" width="100%" style="margin-top: 20px" cellpadding="4">
                    <input type="hidden" name="id"/>
                    <tr>
                        <td align="right" width="40%"><lable for="name">交互名:</lable></td>
                        <td width="60%">
                            <input id="interaction_insert_name" name="name" class="easyui-validatebox" data-options="required:true,missingMessage:'请输入交互名称'"/>
                        </td>
                    </tr>
                    <tr>
                        <td align="right" width="40%"><lable for="k">微信交互关键字:</lable></td>
                        <td width="60%">
                            <input id="interaction_insert_k" name="k" class="easyui-validatebox" data-options="required:true,missingMessage:'请输入微信提供的关键字key'"/>
                        </td>
                    </tr>
                    <tr>
                        <td align="right" width=40%"><lable for="type">回复类型:</lable></td>
                        <td width="60%">
                            <select id="interaction_insert_type" class="easyui-combobox" name="type" data-options="missingMessage:'请选择回复类型',required:true,panelHeight:'auto',editable:false" style="width:140px;">
                                <option value="0">默认</option>
                                <option value="1">关键字</option>
                                <option value="2">地理位置</option>
                                <option value="3">关注</option>
                                <option value="4">带参关注</option>
                                <option value="5">按钮交互</option>
                                <option value="6">扫码待提示</option>
                                <option value="7">扫码推事件</option>
                            </select>
                        </td>
                    </tr>
                    <tr id="intraction_replyType_td">
                        <td align="right" width="40%"><lable for="replyType">发送样式:</lable></td>
                        <td width="60%">
                            <select id="interaction_insert_replyType" class="easyui-combobox" name="replyType" data-options="missingMessage:'请选择发送样式',required:true,panelHeight:'auto',editable:false" style="width:140px;">
                                <option value="0">纯文本</option>
                                <option value="1">单图</option>
                                <option value="2">单图文</option>
                                <option value="3">图文列表</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <div style="margin-top: 30px;text-align: center">
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'", onclick="submitInteraction()">提交</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'", onclick="$('#interaction_insert_dialog').dialog('close')">取消</a>
                </div>
            </form>
        </div>

        <script type="text/javascript">
            function formatType(value) {
                if (value == 1) return '<span style="color:green">' + '关键字' + '</span>';
                else if (value == 2) return '<span style="color:deepskyblue">' + '地理位置' + '</span>';
                else if (value == 3) return '<span style="color:fuchsia">' + '关注' + '</span>';
                else if (value == 4) return '<span style="color:rebeccapurple">' + '带参关注' + '</span>';
                else if (value == 5) return '<span style="color:burlywood">' + '按钮交互' + '</span>';
                else if (value == 0) return '<span style="color:goldenrod">' + '默认' + '</span>';
                else if (value == 6) return '<span style="color:mediumturquoise">' + '扫码待提示' + '</span>';
                else if (value == 7) return '<span style="color:slateblue">' + '扫码推事件' + '</span>';
            }

            function formatReplyType(value) {
                if (value == 0) return '<span style="color:teal">' + '纯文本' + '</span>';
                else if (value == 1) return '<span style="color:lime">' + '单图' + '</span>';
                else if (value == 2) return '<span style="color:deepskyblue">' + '单图文' + '</span>';
                else if (value == 3) return '<span style="color:lightseagreen">' + '图文列表' + '</span>';
            }

            function getContentApply(contentId) {

                var select = $("#content_grid").datagrid("getSelected");
                if(select != null){
                    $('#content_grid').datagrid('clearSelections');
                }
                var queryParams = {};
                queryParams.contentId = contentId;
                var options = $("#content_grid").datagrid('getPager').data("pagination").options;
                options.pageNumber = 1;
                //重新加载
                $("#content_grid").datagrid('options').queryParams = queryParams;
                $("#content_grid").datagrid('reload');
            }

            function insertInteraction() {
                flag = 'add';
                $("#intraction_replyType_td").show();
                $("#interaction_insert_form").form("clear");
                $("#interaction_insert_dialog").dialog({title: "添加微信公众号交互信息"});
                $("#interaction_insert_dialog").dialog("open");
            }

            function updateInteraction() {
                var select = $("#interaction_grid").datagrid("getSelected");
                if (select == null) {
                    $.messager.alert("提示","请选择要修改的微信公众号交互信息！","info");
                    return;
                }
                flag = 'update';
                $("#intraction_replyType_td").hide();
                $("#interaction_insert_form").form("load", select);
                $('#interaction_insert_dialog').dialog({title: "修改微信公众号交互信息"});
                $("#interaction_insert_dialog").dialog("open");
            }

            function deleteInteraction() {
                var url = '${path}/wechat/public/number/interaction/delete.do';
                lananDelete("interaction_grid", "您确定要删除该微信公众号交互信息?", url);
            }

            function submitInteraction() {
                var msg = "";
                var url = "";
                if (flag == "add") {
                    msg = "添加";
                    url = "${path}/wechat/public/number/interaction/insert.do";
                } else {
                    msg = "修改";
                    url = "${path}/wechat/public/number/interaction/update.do";
                }
//                lananUpdateOrInsert(msg, url, "interaction_insert_form", "interaction_insert_dialog", "interaction_grid");
                $.messager.progress();
                $("#interaction_insert_form").form("submit",{
                    url:url,
                    onSubmit:function(){
                        var valid = $(this).form("validate");
                        if (!valid) {
                            $.messager.progress("close");
                        }
                        return valid;
                    },
                    success:function(data){
                        data=$.parseJSON(data);
                        $.messager.progress("close");
                        if(data.success){
                            $("#interaction_insert_dialog").dialog("close");
                            $.messager.show({
                                title: msg + "成功",msg: msg + "成功!",
                                timeout:600,style:"left:30%;top:10%",
                                showType:"fade"
                            });
                            $("#interaction_grid").datagrid("reload");
                        }else{
                            $.messager.alert(msg + "失败", data.msg,"error");
                        }
                    },
                    error:function () {
                        $.messager.progress("close");
                        $.messager.alert("操作失败", "服务器连接失败!","error");
                    }
                });
            }

            function doSearchInteractionRest() {
                $("#searchInteractionForm").form('clear');
                $("#search_interaction_replyType").combobox('setValue', "");
                $("#search_interaction_type").combobox('setValue', "");
            }

            function doSearchInteraction() {
                var queryParams = {};
                queryParams.name = $("#search_interaction_title").val();
                queryParams.k = $("#search_interaction_key").val();
                queryParams.type = $("#search_interaction_type").combobox("getValue");
                queryParams.replyType = $("#search_interaction_replyType").combobox("getValue");
                $("#interaction_grid").datagrid('options').queryParams = queryParams;
                $("#interaction_grid").datagrid('getPager').data("pagination").options.pageNumber = 1;
                $("#interaction_grid").datagrid('clearSelections');
                var select = $('#content_grid').datagrid('getSelected');
                if(select != null){
                    $('#content_grid').datagrid('clearSelections');
                }
                $("#interaction_grid").datagrid('reload');
            }
        </script>
    </div>


    <div data-options="region:'center',split:true,border:false" title="微信公众号交互内容" style="width:60%;">
        <table id="content_grid" class="easyui-datagrid"
               data-options="
		   		url:'${path}/wechat/public/number/content/list.do',
		   		fit:true,
		   		idField:'id',
		   		rownumbers:true,
		   		toolbar:'#content_tools',
		   		pagination:true,
		   		fitColumns:true,
		   		frozenColumns:[[
                {field:'ck',checkbox:true}]],
		   		singleSelect:false
		   		">
            <thead>
            <%--<th data-options="field:'id', align:'center', checkbox:true">ID</th>--%>
            <th data-options="field:'title',align:'center'">标题</th>
            <th data-options="field:'content', align:'center', width:'60px'">文本内容</th>
            <th data-options="field:'img',align:'center',formatter:formatterImg">单图图片</th>
            <th data-options="field:'mediaId',align:'center'">单图MediaId</th>
            <th data-options="field:'description', width:'60px', align:'center'">描述</th>
            <th data-options="field:'picUrl', align:'center',formatter:formatterImg">图片</th>
            <th data-options="field:'url', width:'60px', align:'center'">跳转地址</th>
            <th data-options="field:'status', align:'center',formatter:formatterStatus">是否启用</th>
            <th data-options="field:'createTime',align:'center',formatter:formatDatebox">创建时间</th>
            <th data-options="field:'updateTime',align:'center',formatter:formatDatebox">更新时间</th>
            <th data-options="field:'ord',align:'center'">排序</th>
            </thead>
        </table>
        <div id="content_tools">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="$('#content_grid').datagrid('reload');">刷新</a>
            <shiro:hasPermission name="/wechat/public/number/content/insert.do">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="insertContent()">添加</a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/wechat/public/number/content/update.do">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="updateContent()">修改</a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/wechat/public/number/content/delete.do">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="deleteContent()">删除</a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/wechat/public/number/content/changeContentStatusToEnableOrDisable.do">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-tip'" onclick="changeWPNCAble()">启用|禁用</a>
            </shiro:hasPermission>
            <form action="#" id="searchContentForm">
                <label>标题:</label>
                <input class="easyui-textbox" id="search_content_title" name="contentTitle" data-options="prompt:'请输入搜索文章标题'"/>
                <label>文本内容:</label>
                <input class="easyui-textbox" id="search_content_content" name="contentContent" data-options="prompt:'请输入搜索文本内容'"/>
                <label>描述:</label>
                <input class="easyui-textbox" id="search_content_description" name="contentDescription" data-options="prompt:'请输入搜索描述信息'"/>
                &nbsp;&nbsp;&nbsp;
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="doSearchContent()">搜索</a>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="doSearchContentReset()">重置</a>
            </form>
        </div>
        <script type="text/javascript">
            function formatterImg(value){
                if(value!=null){
                    return '<img height="30px" align="center" src="'+value+'" alt="" />';
                }else{
                    return '';
                }
            }

            function insertContent() {
                $.modalDialog({
                    title : '微信公众号交互内容添加',
                    id:'content_insert_dialog',
                    width : 600,
                    height : 400,
                    href : '${path }/wechat/public/number/content/insert/index.do',
                });
            }

            function updateContent() {
                var select = $("#content_grid").datagrid("getSelected");
                if (select == null) {
                    $.messager.alert("提示","请选择要修改的微信公众号交互内容！","info");
                    return;
                }
                $.modalDialog({
                    title : '微信公众号交互内容修改',
                    id:'content_update_dialog',
                    width : 600,
                    height : 400,
                    href : '${path }/wechat/public/number/content/update/index.do?id=' + select.id,
                });
            }

            function deleteContent() {
                lananDelete("content_grid", "您确定要删除该交互内容？", "${path}/wechat/public/number/content/delete.do")
            }

            function doSearchContent() {
                var queryParams = {};
                queryParams.title = $("#search_content_title").val();
                queryParams.content = $("#search_content_content").val();
                queryParams.description = $("#search_content_description").val();
                $("#content_grid").datagrid('options').queryParams = queryParams;
                $("#content_grid").datagrid('getPager').data("pagination").options.pageNumber = 1;
                $("#content_grid").datagrid('clearSelections');
                $("#content_grid").datagrid('reload');
            }

            function doSearchContentReset() {
                $("#searchContentForm").form('clear');
            }
        </script>
    </div>
</div>

<div id="editWPNCEnableOrDisable" class="easyui-dialog"></div>

<script type="text/javascript">
    function formatterStatus(status) {
        if (status == 0) return '<span style="color:red">' + '禁用' + '</span>';
        else if (status == 1) return '<span style="color:green">' + '启用' + '</span>';
    }

    var dlg = null;
    $(function () {
        dlg = $('#editWPNCEnableOrDisable').dialog({
            title : "启用交互内容|禁用交互内容",
            buttons : [ {
                id : "flagBttOne",
                text : "启用",
                handler : function() {
                    wPNCStatusToEnable();
                }
            }, {
                id : "flagBttTwo",
                text : "禁用",
                handler : function() {
                    wPNCStatusToDisable();
                }
            }, {
                text : "关闭",
                handler : function() {
                    dlg.dialog('close');
                }
            } ]
        });
        dlg.dialog('close');
    })


    function changeWPNIAble() {
        var select = $("#interaction_grid").datagrid("getSelected");
        if (select == null) {
            $.messager.alert("提示","请选择要操作的交互信息！","info");
            return;
        }
        changeWPNCStatusToEnableOrDisable(false, select.id, select.status);
    }

    function changeWPNCAble() {
        var rowsData = $("#content_grid").datagrid("getSelections");//找到所有选中的行
        if (rowsData.length <= 0) {
            $.messager.alert("提示","请选择要操作的交互内容！","info");
            return;
        }
        dlg.dialog('open'); // 打开窗口
    }

    function wPNCStatusToEnable() {
        hanlelContentStatus(0)
    }

    function wPNCStatusToDisable() {
        hanlelContentStatus(1)
    }

    function hanlelContentStatus(status) {
        dlg.dialog('close');
        var rowsData = $("#content_grid").datagrid("getSelections");//找到所有选中的行
        var ids = "";
        if (rowsData.length > 0) {
            for (var i = 0; i < rowsData.length; i++) {
                var row = rowsData[i];
                if (i == rowsData.length - 1) ids += row.id;
                else ids += row.id + ',';
            }
        }

        if (ids.length <= 0) {
            $.messager.alert("提示","请选择要操作的交互内容！","info");
            return;
        }
        changeWPNCStatusToEnableOrDisable(true, ids, status);
    }

    function changeWPNCStatusToEnableOrDisable(isContent, ids, status1) {
        var status = 0;
        var url = "";
        var msg = "";

        if (status1 == 0) {
            msg += "启用";
            status = 1;
        } else {
            msg += "禁用";
            status = 0;
        }
        var msgC = "";
        if (isContent) {
            url = "${path}/wechat/public/number/content/changeContentStatusToEnableOrDisable.do";
            msgC += "该交互内容？";
            if (status == 1) {
                msgC += "注意: 如果所选交互内容所属交互信息未启用, 将无法启用该交互内容!";
            }
        } else {
            url = "${path}/wechat/public/number/interaction/changeInteractionStatusToEnableOrDisable.do";
            msgC += "该交互信息？";
            if (status == 0) {
                msgC += "如果禁用，该交互信息下的所有交互内容将全部禁用";
            }
        }
        $.messager.confirm("确认", "你确定要" + msg + msgC, function(yes){
            if(yes){
                $.messager.progress();
                $.ajax({
                    url:url,
                    type:"post",
                    data:{id:ids, status:status},
                    dataType:"json",
                    success:function(data){
                        $.messager.progress("close");
                        if(data.success){
                            $.messager.show({
                                title:"操作成功",
                                msg:"操作成功!",
                                timeout:600,
                                style:"left:30%;top:10%",
                                showType:"fade"
                            });
                            if (isContent) {
                                $("#content_grid").datagrid("reload");
                            } else {
                                $("#interaction_grid").datagrid("reload");
                                $("#content_grid").datagrid("reload");
                            }
                        }else{
                            $.messager.alert(msg + "失败", data.msg,"error");
                        }
                    },
                    error:function(){
                        $.messager.progress("close");
                        $.messager.alert("操作失败", "服务器连接失败!","error");
                    }
                });
            }
        });
    }
</script>
</body>
</html>
